<template>
    <div class="topDiv">
        <div class="ymdhmw">{{ dateYMD }} {{ dateHM }} {{ dateWeek }}</div>
        <div class="topTitle"></div>
        <div class="topBack" @click="router.go(-1)">
        </div>
        <div class="topCenter">
            <div class="leftItem" v-for="(item, idx) in schoolInfoList" :key="idx">
                <div v-if="idx === 0" class="leftIcon1"></div>
                <div v-if="idx === 1" class="leftIcon2"></div>
                <div v-if="idx === 2" class="leftIcon3"></div>
                <div v-if="idx === 3" class="leftIcon4"></div>
                <div>
                    <div class="leftText">
                        {{ item.title }}
                    </div>
                    <div v-if="idx === 0" class="leftNum1">{{ item.value }}</div>
                    <div v-if="idx === 1 || idx === 2" class="leftNum2">{{ item.value }}</div>
                    <div v-if="idx === 3" class="leftNum3">{{ item.value }}</div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from "vue-router"
import dayjs from "dayjs"
import zhcn from "dayjs/locale/zh-cn"
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
const getBuildInfo = () => {
    EsAjax.get(ApiUrls.getBuildingInfo).then(res => {

        if (res.data.code === 200) {
            let { data } = res.data
            schoolInfoList.value.map((v, i) => {
                if (i === 0) {
                    v.value = data.classroomCount || 0
                }
                if (i === 1) {
                    v.value = data.classroomCount || 0
                }
                if (i === 2) {
                    v.value = data.intelligentRoomCount || 0
                }
                if (i === 3) {
                    v.value = data.meetingRoomCount || 0

                }
            })
        }
    })
}
const router = useRouter()
const timer = ref()
const dateYMD = ref()
const dateHM = ref()
const dateWeek = ref()
const schoolInfoList = ref([
    {
        title: '教室总数',
        value: '0'
    },
    {
        title: '多媒体教室',
        value: '0'
    },
    {
        title: '智慧教室',
        value: '0'
    },
    {
        title: '阶梯教室',
        value: '0'
    }
])
onMounted(() => {
    getBuildInfo()
    timer.value = setInterval(() => {
        const currentDate = dayjs(new Date())
        dateYMD.value = currentDate.format('YYYY年MM月DD日')
        dateHM.value = currentDate.format('HH:mm')
        dateWeek.value = currentDate.locale('zh-cn').format('dddd')
    })
})
onBeforeUnmount(() => {
    if (timer.value) {
        clearInterval(timer.value)
    }
})
</script>

<style lang="scss" scoped>
.topDiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 199px;
    background-image: url("../../../../assets/img/bigScreen/topBgNew.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 100;
    display: flex;

    .ymdhmw {
        width: 250px;
        font-size: 18px;
        font-weight: 400;
        color: #02B3F2;
        text-shadow: 3px 3px 0px rgba(0, 23, 98, 0.5);
        margin: 42px 0 0 31px;
    }

    .topLogo {
        width: 50px;
        height: 50px;
        margin: 23px;
        background: url("../../../../assets/img/logo.png") 100% 100%;
        background-size: 100% 100%;
    }

    .topTitle {
        width: 463px;
        height: 55px;
        margin-left: calc(50% - 513px);
        margin-top: 12px;
        background: url("../../../../assets/img/bigScreen/titleNew.png");
    }


    .topBack {
        position: absolute;
        right: 44px;
        top: 39px;
        width: 61px;
        height: 20px;
        z-index: 120;
        background: url("../../../../assets/img/bigScreen/back.png");
        cursor: pointer;
    }


}

.topCenter {
    position: absolute;
    top: 80px;
    left: 27%;
    display: flex;
    z-index: 101;

    .leftItem {
        // width: 80px;
        height: 140px;
        margin-right: 62px;
        display: flex;
        align-items: center;

        .leftIcon1 {
            width: 70px;
            height: 70px;
            margin: 0 10px;
            background: url("../../../../assets/img/bigScreen/jxls.png");
            text-align: center;
        }

        .leftIcon2 {
            width: 70px;
            height: 70px;
            margin: 0 10px;

            background: url("../../../../assets/img/bigScreen/dmtjs.png");
            text-align: center;
        }

        .leftIcon3 {
            width: 70px;
            height: 70px;
            margin: 0 10px;

            background: url("../../../../assets/img/bigScreen/zhjs.png");
            text-align: center;
        }

        .leftIcon4 {
            width: 70px;
            height: 70px;
            margin: 0 10px;

            background: url("../../../../assets/img/bigScreen/jtjs.png");
            text-align: center;
        }

        .leftText {
            font-size: 18px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            color: #90B6ED;
            text-align: center;
        }

        .leftNum1 {
            font-size: 26px;
            font-family: "54xianhei";
            font-weight: 400;
            color: #02B3F2;
            text-align: center;
        }

        .leftNum2 {
            font-size: 26px;
            font-family: "54xianhei";
            font-weight: 400;
            color: #15ECFF;
            text-align: center;
        }

        .leftNum3 {
            font-size: 26px;
            font-family: "54xianhei";
            font-weight: 400;
            color: #9D8BFF;
            text-align: center;
        }
    }
}
</style>